<template>
	<view v-for="(item,index) in list" :key="item.id" class="flex comment-main">
		<view class="head-img">
			<image :src="item.handimg"></image>
		</view>
		<view class="comment-right f1" @click.stop="onComment(0, item)">
			<view>{{item.username}}</view>
			<view>{{item.content}}</view>
			<view>{{filterTime(item.createtine,'mm-dd hh-MM')}} 来自成都</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		getCurrentInstance
	} from 'vue'
	const { proxy } : any = getCurrentInstance()
	interface Props {
		list: any[],
		i: number
	}
	const p = withDefaults(defineProps<Props>(), {
		list: () => [],
		i: 0
	})
	const emit = defineEmits(['onComment','seeMore'])
	const onComment = (type,item) => {
		emit('onComment', type, item, 0, p.i)
	}
	const seeMore = (item) => {
		emit('seeMore', item)
	}
	const filterTime = (time : string, form = 'yyyy-mm-dd hh-MM') => {
		return proxy.$u.timeFormat(time, form)
	}
</script>

<style lang="scss" scoped>
	.comment {
		background-color: #fff;
		margin-top: 20rpx;
	
		&-header {
			margin: 0 20rpx;
			line-height: 70rpx;
			border-bottom: 1px solid rgb(230, 230, 230);
	
			text {
				margin-left: 10rpx;
			}
		}
	
		&-count {
			font-size: 20rpx;
			color: rgb(68, 167, 255);
			background-color: rgb(245, 245, 245);
			padding: 15rpx 0 15rpx 10rpx;
		}
	
		&-right {
			margin-left: 20rpx;
		}
	
		&-main {
			padding: 20rpx;
		}
	}
</style>